<template>
<!--<h1>笔记展示模块</h1>-->


  <div>
    <div>
      <el-input style="width: 180px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入作者"
                v-model="pageParam.param.author"></el-input>

      <el-input style="width: 180px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入标题"
                v-model="pageParam.param.title"></el-input>
      <el-input style="width: 180px; margin-right: 10px;" suffix-icon="Search" placeholder="请输入分类"
                v-model="pageParam.param.categoryName"></el-input>
      <el-button type="success" @click="clearAll" >重置</el-button>
      <el-button type="primary" @click="myArticle2">我的笔记</el-button>
      <el-button type="primary" @click="myArticle">我的私有笔记</el-button>
    </div>
    <el-table :data="data" ref="forData"
              :header-cell-style="{ background: '#f2f5fc', color: '#555555' }"
              border style="width: 1110px; margin-top: 10px; margin-bottom: 10px;">
<!--      <el-table-column prop="articleId" label="序号" width="90" />-->
      <el-table-column prop="title" label="文章名" width="120" />
      <el-table-column prop="author" label="作者" width="180" />
      <el-table-column prop="stuNum" label="学号" width="180" />
      <el-table-column prop="categoryName" label="分类名" width="180" />
      <el-table-column prop="updateTime" label="时间" width="180" />
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button type="success" size="small" @click="studentLearnData(scope)">文章详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="pageParam.pageNum"
        v-model:page-size="pageParam.pageSize"
        :page-sizes="[2, 5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

  </div>

</template>

<script>
import {useLoginStateStore} from "../../store/storeLoginState.js";
import {ref} from "vue";

export default {
  name: "StuArticle",
  setup(){
    const loginStateStore = useLoginStateStore()
    return {
      loginStateStore: loginStateStore
    }
  },
  data(){
    return{
      //分页查询学生数据
      pageParam:{
        pageSize:10,			//每页显示几条
        pageNum:1,				//当前页数
        param:{					//查询条件
          author:'',			//学生姓名author title categoryName
          title:'',		//标题
          categoryName:'' , //文章名字
          stuNum:'',
          artStatus:1,
        }
      },
      total:0,             		//查询到的条目
      data:[] ,//分页的数据
      dialogFormVisible : ref(false),

    }
  },

  methods:{
    //_this.$router.push("/student/stuArticle");
    studentLearnData(scope){
      console.log("课程id：",scope.row.articleId)
      this.$router.push({path:'Article',
        query: {stuNum:scope.row.stuNum,articleId:scope.row.articleId}})

    },
    myArticle2(){
      let _this = this;
      _this.data=[];
      // let stuNum=_this.loginStateStore.loginUserName
      let  stuNum=window.sessionStorage.getItem("userNum")
      _this.pageParam.param.stuNum=stuNum
      _this.pageParam.param.artStatus=1
      _this.articleListPage()
    },
    myArticle(){
      let _this = this;
      _this.data=[];
      // let stuNum=_this.loginStateStore.loginUserName
      let  stuNum=window.sessionStorage.getItem("userNum")
      _this.pageParam.param.stuNum=stuNum
      _this.pageParam.param.artStatus=2
      _this.articleListPage()
    },
    articleListPage() {
      let url = "/studyadmin/person-article/articleList";
      let _this = this;

      _this.$axios.post(url, _this.pageParam).then(function (serverData) {
        _this.total = serverData.data.total;
        _this.data = serverData.data.data;
        console.log("***************",_this.data)
      })
    },
    handleSizeChange(val) {			//修改当前每页条目树
      this.pageParam.pageSize = val;
    },
    handleCurrentChange(val) {		//修改当前所在页数
      this.pageParam.pageNum = val;
    },
    clearAll() {
      this.pageParam.param.title = '';
      this.pageParam.param.author = '';
      this.pageParam.param.categoryName = '';
    },
  },
  watch:{
    pageParam:{			//当pageParam中参数发生变化时重新查询后端数据
      handler(newValue, oldValue) {
        this.articleListPage();
      },
      deep: true
    }
  },
  beforeMount() {
    this.articleListPage();
  },

}
</script>

<style scoped>

</style>